<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onUnmounted, ref } from 'vue'

import { clear, next, question } from './data'
import { imagePath } from '@/libs/file-utils'

const img_bg = imagePath('quiz/tarot/bg.jpg')
const btn_bg = imagePath('quiz/tarot/detail/btn-bg.png')
const card_bg = imagePath('quiz/tarot/detail/card.png')

const angle = 70
const total = 16
const radius = 700
const cards: {
  x: number
  y: number
  rot: number
}[] = []

for (let i = 0; i < total + 1; i++) {
  const rot = i / total * angle - angle / 2
  const radian = rot / 180 * Math.PI
  const x = radius * Math.sin(radian)
  const y = radius * Math.cos(radian)

  cards.push({ rot, x, y })
}

const hoverIdx = ref(-1)
const selectIdx = ref(-1)

const select = () => {
  selectIdx.value = hoverIdx.value
  hoverIdx.value = -1
}

onUnmounted(clear)
</script>

<template>
  <PageWrapper name="quiz-tarot-detail">
    <div
      class="wrapper"
      :style="{ backgroundImage: img_bg }"
    >
      <div class="title">塔罗牌占卜</div>
      <div class="tip">心中默念你想知道的事</div>

      <div
        v-if="question"
        class="card"
      >
        <div
          class="inner"
          :style="{ backgroundImage: question.imageUrl }"
        ></div>
      </div>
      <div
        v-else
        class="cards"
        :style="{ top: `calc(740rpx + ${radius}rpx)` }"
      >
        <div
          v-for="(item, idx) in  cards"
          :key="idx"
          class="item"
          :class="{ active: hoverIdx === idx }"
          :style="{
            left: item.x + 'rpx',
            bottom: (idx === selectIdx ? 100 : 0) + item.y + 'rpx',
            transform: `translateX(-50%)rotateZ(${idx === selectIdx ? item.rot / 2 : item.rot}deg)`,
            backgroundImage: card_bg
          }"
          @touchstart="hoverIdx = idx"
          @touchend="select"
        ></div>
      </div>

      <div
        class="btn"
        :style="{ backgroundImage: btn_bg }"
        @click="next"
      >{{ question ? '查看结果' : '确定' }}</div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  display: inline-block;

  background-size: cover;
  background-position: center top;

  .title {
    margin-top: 96rpx;

    color: #fff;
    text-align: center;
    font-size: 80rpx;
    line-height: 80rpx;
  }

  .tip {
    margin-top: 24rpx;

    color: #F9E1FF;
    text-align: center;
    font-size: 32rpx;
    line-height: 58rpx;
  }

  .cards {
    position: absolute;
    left: 50%;

    .item {
      position: absolute;
      width: 255rpx;
      height: 382rpx;

      transform-origin: center bottom;

      transition: bottom .2s, transform .2s;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        background-color: #fff;
        border-radius: 10rpx;

        opacity: .0;
        transition: opacity .3s;
      }

      &.active::after {
        opacity: .1;
      }
    }
  }

  .card {
    position: absolute;
    top: 284rpx;
    left: 50%;
    transform: translateX(-50%);

    width: 510rpx;
    height: 822rpx;

    box-sizing: border-box;
    padding: 20rpx 24rpx;

    border-radius: 16rpx;
    border: 4rpx solid #614F70;
    background-color: #2F1A40;

    .inner {
      width: 100%;
      height: 100%;

      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  .btn {
    position: fixed;
    bottom: 124rpx;
    left: 50%;
    transform: translateX(-50%);

    width: 554rpx;
    height: 76rpx;

    color: #fff;
    text-align: center;
    font-size: 48rpx;
    line-height: 76rpx;
    text-shadow: 4rpx 2rpx 5rpx rgba(#000, .34);
  }
}
</style>